<template>
  <div id="app">
    <header>
      <section class="left">
        <div class="left-item">新闻</div>
        <div class="left-item">hao123</div>
        <div class="left-item">地图</div>
        <div class="left-item">贴吧</div>
        <div class="left-item">视频</div>
        <div class="left-item">网盘</div>
        <div class="left-item">更多</div>
      </section>
      <section class="right">
        <div class="right-item">设置</div>
        <div class="right-item login-item">登录</div>
      </section>
    </header>
  </div>
</template>

<script>
  export default {
  }
</script>
<style lang="less">
  header{
    display: flex;
    justify-content: space-between;
  }
  .left{
    display: flex;
  }
  .right{
    display: flex;
  }
  .left-item{
    width: 70px;
  }
  .right-item{
    width: 70px;
  }
  .login-item{
    display: flex;
    // justify-content: center;
    // align-items: center;
    // flex-direction: column;
    // align-items: center;
    justify-content:center;
    border-radius: 5px;
    color:white;
    background-color: #4e6ef2;
  }
</style>
